<template>
  <div class="help-repayml">
    <HeaderTop title="Help"></HeaderTop>
    <div class="title">7-11 or other stores with EC-pay(CLIQQ)</div>
    <div class="main">
      <p class="t">Step1.</p>
      <p>Find 7-11 or other stores with EC-pay(CLIQQ).</p>
      <img src="~@/assets/imgs/help/repayecpay/step2-pic1.jpg" class="mgt-20" />
      <img src="~@/assets/imgs/help/repayecpay/step2-pic2.jpg" />
      <p class="t">Step2.</p>
      <p>Input your contract number and your repay amount.</p>
      <img src="~@/assets/imgs/help/repayecpay/step3-pic1.jpg" class="mgt-20" />
      <img src="~@/assets/imgs/help/repayecpay/step3-pic2.jpg" />
      <img src="~@/assets/imgs/help/repayecpay/step3-pic3.jpg" />
      <img src="~@/assets/imgs/help/repayecpay/step3-pic4.jpg" />
      <p class="t">Step3.</p>
      <p>Print the Bill and pay this bill.</p>
      <img src="~@/assets/imgs/help/repayecpay/step4-pic1.jpg" class="mgt-20" />
    </div>
  </div>
</template>

<script>
  import HeaderTop from '@/components/header-top'
  export default {
    name: 'help-repayecpay',
    components: {
      HeaderTop
    },
    data () {
      return {
      };
    },
  }
</script>

<style lang="scss" scoped>
  @import '~@/assets/scss/function';

  [data-page=help-repayecpay] {
    body {
      background: #f8f8f8;
    }
    .help-repayml {
      color:#333333;
      padding:180px 0 30px 0;
      .title {
        font-size:32px;
        font-weight:bold;
        color:rgba(51,51,51,1);
        line-height:48px;
        padding:0 96px;
        margin:0 0 60px 0;
        text-align: center;
      }
      .main {
        width:690px;
        margin:0 auto;
        background:#FFF;
        border-radius:20px;
        padding:30px 30px 50px 30px;
        font-size:28px;
        color:#222222;
        .t {
          color:#DE4B5D;
          font-weight: bold;
          margin-top:60px;
        }
        .t:first-child {
          margin-top:0px;
        }
        .mgt-20 {
          margin-top:20px;
        }
      }
    }
  }
</style>
